import React from "react";
import './index.scss'
import Sticky from "@/components/Sticky/Sticky";
import EventsStore from "@/pages/radar/store/EventsStore";
import {Checkbox, Menu, Space, Row, Col, Dropdown, Button} from "antd";
import {
  UnorderedListOutlined,
  AppstoreFilled,
  SyncOutlined,
  ToTopOutlined
} from "@ant-design/icons";
import {IConstEnum} from "@/common/common";
import {FuncGroupsProps} from "@/components/FuncBtnGroup/constants";
import FuncBtnGroup from "@/components/FuncBtnGroup";
import {getShowHeaderFuncBtns} from "@/pages/radar/Events/common/eventConfig";
import A from "@/components/A";

interface FuncGroupProps {
  total?: number;
}

interface FuncGroupState {
  popVisibleKey?: string;
  isAllSelected: boolean;
  exportCommandVisible: boolean;
  exportResultVisible: boolean;
  title: string;
  item: any;
}

class FuncGroup extends React.Component<FuncGroupProps, FuncGroupState> {

  constructor(props: FuncGroupProps) {
    super(props);
    this.state = {
      popVisibleKey: undefined,
      isAllSelected: false,
      exportCommandVisible: false,
      exportResultVisible: false,
      title: "",
      item: undefined,
    }

    // this.handlePopoverVisibleChange = this.handlePopoverVisibleChange.bind(this);
    // this.toggleAllRecordSelect = this.toggleAllRecordSelect.bind(this);
    // this.handleExport = this.handleExport.bind(this);
    // this.handlePanel = this.handlePanel.bind(this);
    // this.cancelExportCommand = this.cancelExportCommand.bind(this);
    // this.cancelResultCommand = this.cancelResultCommand.bind(this);
    // this.exportCommandOnClickView = this.exportCommandOnClickView.bind(this);
    // this.exportCommandInvisible = this.exportCommandInvisible.bind(this);
  }

  renderFuncButtons() {
    const funcBtnsProps: FuncGroupsProps = {
      btns: [],
      placement: "bottomLeft",
      htmlType: "button"
    };

    funcBtnsProps.btns.push({
      key: "del",
      text: "删除",
      confirmMsg: "确定要删除选中的事件吗？",
      // disabled: eventsStore.isTotalSelected,
      onClick: (data: any) => {
        // eventsStore.deleteBatchEvents();
      }
    });

    funcBtnsProps.btns.push({
      key: "refresh",
      text: <SyncOutlined/>,
      type: "dashed",
      title: "刷新",
      // onClick: eventsStore.queryEvents
    });
    return FuncBtnGroup(funcBtnsProps);
  }

  renderCardexList() {
    return (
      <Row gutter={10}>
        <Col>
          <div>
            <span
              title={"列表式"}
              // onClick={
              //   eventsStore.viewType === "card" ? eventsStore.toggleViewType : undefined
              // }
              className="viewType"
              style={{
                cursor: EventsStore.viewType === "card" ? "pointer" : undefined
              }}
            >
              <UnorderedListOutlined className={EventsStore.viewType === "list" ? "active" : ""}/>
            </span>
          </div>
        </Col>
        <Col
          className="no-border"
          style={{
            display: EventsStore.viewType === "card" ? "none" : "inline"
          }}
        >
          <span
            title={"缩略图"}
            // onClick={EventsStore.toggleThumbnail}
            style={{color: "blue", cursor: "pointer"}}
          >
            {EventsStore.thumbnailprop === "thumb" ? "显示缩略图" : "关闭缩略图"}
          </span>
        </Col>

        <Col>
          <span
            title={"卡片式"}
            className="viewType"
            // onClick={
            //   EventsStore.viewType === "list" ? eventsStore.toggleViewType : undefined
            // }
            style={{cursor: EventsStore.viewType === "list" ? "pointer" : undefined}}
          >
            {" "}
            <AppstoreFilled className={EventsStore.viewType === "card" ? "active" : ""}/>
          </span>
        </Col>
      </Row>
    );
  }

  renderCheckbox() {
    return (
      <div className="checkFunc">
        <Checkbox
          indeterminate={true}
          disabled={!EventsStore.pageResponse.pageInfo.total}
          onChange={EventsStore.toggleSelectAll}
          // checked={checkAll}
          className="clickable"
        >
          全选
        </Checkbox>

        <span>
          <A title={"已选中"}>
            <span>
              已选中
              <span className="selectEventCount">
                {EventsStore.IsSelectAll && EventsStore.isTotalSelected ? EventsStore.pageResponse.pageInfo.total || 0 - EventsStore.markedResultIds.length : EventsStore.selectedRowKeys?.length}
              </span>
              个项目
              {EventsStore.IsSelectAll && <span>，</span>}
            </span>
          </A>
          {EventsStore.IsSelectAll && (EventsStore.isTotalSelected ? (
            <A onClick={EventsStore.toggleIsTotalSelect}>
              {"取消勾选所有页"}
            </A>
          ) : (
            <A onClick={EventsStore.toggleIsTotalSelect}>
              <span>勾选所有{EventsStore.pageResponse.pageInfo.total || 0 - EventsStore.markedResultIds.length}个项目</span>
            </A>
          ))}
        </span>
      </div>
    );
  }

  /** 导出当前选中的内容 */
  handleExportButton = () => {

  }

  render() {
    return (
      <Sticky extra={{viewType: EventsStore.viewType, totalCount: 0}}>
        {(stickyProps) => {
          const extra = stickyProps.extra;
          return (
            <div className="funcGroup" style={{...stickyProps.style}}>

              <div className="titleLine">
                <div>
                  共
                  <span className="selectEventCount">
                    {extra.totalCount}
                  </span>
                  条
                </div>
                <Space>{this.renderCardexList()}</Space>
              </div>

              <div>
                <Space>{this.renderFuncButtons()}</Space>
              </div>

              <div>
                {this.renderCheckbox()}
                <div className="exportBox" style={{height: "32px"}}>
                  {EventsStore.selectedRowKeys.length > 0 && (<Button onClick={this.handleExportButton}>导出</Button>)}
                </div>
              </div>
            </div>
          );
        }}
      </Sticky>
    )
  }
}

export default FuncGroup
